<template>
  <!--面包屑-->
  <div style="margin-bottom: 30px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link to="/Materials/ShowMaterial">物资采购</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>采购申请</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  
  
    <el-form ref="ruleFormRef" style="max-width: 600px;margin:auto" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
    
        <el-form-item label="货物名称" prop="nameOfGoods">
          <el-input v-model="form.nameOfGoods" placeholder="请输入货物名称" disabled />
        </el-form-item>
    
        <el-form-item label="类型" prop="materialStoreType">
          <el-select v-model="form.materialStoreType" placeholder="请选择类型" disabled >
            <el-option label="车辆用品" value="车辆用品" />
            <el-option label="办公用品" value="办公用品" />
          </el-select>
        </el-form-item>
  
        <el-form-item label="材质" prop="material">
          <el-select v-model="form.material" placeholder="请选择材质" disabled>
            <el-option label="金属" value="金属" />
            <el-option label="橡胶" value="橡胶" />
            <el-option label="塑料" value="塑料" />
            <el-option label="液体" value="液体" />
            <el-option label="纸质" value="纸质" />
          </el-select>
        </el-form-item>
  
        <el-form-item label="规格" prop="specifications">
          <el-input v-model="form.specifications" placeholder="请输入规格" disabled />
        </el-form-item>
  
        <el-form-item label="产地" prop=" ">
          <el-select v-model="form.CountryId" placeholder="请选择国家" size="large" style="width: 240px" @change="getEconomizeList" disabled>
        <el-option v-for="item in countryData" :key="item.countryId" :label="item.countryName" :value="item.countryId"/>
      </el-select>
          
          &nbsp;&nbsp;
          <el-select v-model="form.EconomizeId" placeholder="请选择省/州" size="large" style="width: 240px" disabled>
        <el-option v-for="item in EconomizeData" :key="item.economizeId" :label="item.economizeName" :value="item.economizeId"/>
      </el-select>
        </el-form-item>
    
        <el-form-item label="数量" prop="number">
          <el-input-number v-model="form.number" :min="1" @change="handleChange" placeholder="请输入数值" disabled />
        </el-form-item>
  
        <el-form-item label="期望交付日期" prop="deliveryDate">
          <el-date-picker v-model="form.deliveryDate" type="date" placeholder="请输入期望交付日期" value-format="YYYY-MM-DD" disabled/>
        </el-form-item>
  
        <el-form-item label="用途描述" prop="usageDescription">
          <el-input v-model="form.usageDescription" :rows="3" type="textarea" placeholder="请输入用途描述" disabled/>
        </el-form-item>
  
        <el-form-item label="备注" prop="notes">
          <el-input v-model="from.approvalNotes" :rows="3" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>

        <el-form-item label="转批人" prop="notes">
          <el-select v-model="from.subgrantor" placeholder="请选择转批人名字" style="width: 240px;" clearable >
      <el-option v-for="item in username" :key="item.id" :label="item.name" :value="item.name"/>
    </el-select>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" size="large" @click="submitForm()" :disabled="from.subgrantor==''">通过并转批</el-button>&nbsp;&nbsp;
          <el-button size="large" @click="Cancel()">拒绝</el-button>&nbsp;&nbsp;
          <el-button type="success" size="large" @click="onSubmit()">通过并终止转批</el-button>&nbsp;&nbsp;
        </el-form-item>
      </el-form>
    </template>
    
    <script setup lang="ts">
    import { reactive, ref, onMounted, computed } from 'vue'
    import axios from 'axios';
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import { ElMessage, ElMessageBox } from 'element-plus'
    
    import {useRoute,useRouter} from 'vue-router'
    
    const route = useRoute();
    const router = useRouter();
    
    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
  
    onMounted(() => {
      getCountryList()
  
      getEconomizeList()

      getUserSelect()

      getReverseMaterialStore()
  })
  
    //审批表
const from=reactive({
    approvalResult:'',
    approvalNotes:'',
    approver:'',
    materialStoreId:'',
    subgrantor:''
})
    //form表单
    const form: any = reactive({
      materialStoreId:'',
      companyID: "",
      user_Id: '',
      nameOfGoods: "",
      materialStoreType: "",
      material: "",
      specifications: "",
      CountryId: '',
      EconomizeId: '',
      number: 0,
      deliveryDate: "",
      usageDescription: "",
      applicant: "张三",
      approvalStatus: 10,
      approver: "",
      registrant: "",
      paymentMethod: "",
      unitPrice: 0,
      notes: "",
      materialClassificat: 1,
      createdBy: "张三"
    })
  
    //数量
    const handleChange = (value: number) => {
    //console.log(value)
  }
    
    //校验规则
    const rules = reactive<FormRules>({
      nameOfGoods: [
        { required: true, message: '请输入货物名称', trigger: 'blur' },
      ],
      materialStoreType: [
        { required: true, message: '请选择类型', trigger: 'change',},
      ],
      material: [
        { required: true, message: '请选择材质', trigger: 'change',},
      ],
      specifications: [
        { required: true, message: '请输入规格', trigger: 'change',},
      ],
      CountryId: [
        { required: true, message: '请选择产地', trigger: 'change',},
      ],
      deliveryDate: [
        { required: true, message: '请选择期望交付日期', trigger: 'change',},
      ],
      usageDescription: [
        { required: true, message: '请输入用途描述', trigger: 'change',},
      ],
    })
  
      //获取国家列表
    const countryData: any = ref([]);
    const getCountryList = () => {
      axios.get('/mread/api/ShowMaterialStore/GetCountryList', {
        params: {
          
        }
      }).then(res=>{
      // console.log(res);
        countryData.value = res.data.data;
    }).catch(err=>{
      console.log(err);
      
    })    
    }
  
      //获取省/州列表
      const EconomizeData: any = ref([]);
    const getEconomizeList = () => {
       form.EconomizeId = "";
      axios.get('/mread/api/ShowMaterialStore/GetEconomizeList', {
        params: {
          CountryId: form.CountryId || 0
        }
      }).then(res=>{
      //console.log(res);
      
      EconomizeData.value = res.data.data;
    }).catch(err=>{
      console.log(err);
      
    })    
    }
  

  //用户名称列表
    const UserSelectData: any = ref([])
    const username: any = ref([])
const getUserSelect=()=>{
  axios.get('http://1.117.93.87:8000/rbacdu/api/User/UserSelectShow').then(res=>{
    //console.log(res);
    UserSelectData.value = res.data.data
    username.value =UserSelectData.value.filter((o:any)=>o.name!=localStorage.getItem('username'));
  }).catch(err=>{
    console.log(err);
    
  })    
    }

    //反填
const getReverseMaterialStore=()=>{
  axios.get('/mread/api/ShowMaterialStore/ReverseMaterialStore',
    {
      params: {
        materialStoreId:route.query.materialStoreId
      }
    }
  ).then(res=>{
    console.log(res);
    let Data = res.data.data;
    form.companyID = Data.companyID;
    form.user_Id = Data.user_Id;
    form.nameOfGoods = Data.nameOfGoods;
    form.materialStoreType = Data.materialStoreType;
    form.material = Data.material;
    form.specifications = Data.specifications;
    getCountryList()
    form.CountryId = Data.countryId,
      getEconomizeList()
    form.EconomizeId = Data.economizeId,
    form.number = Data.number;
    form.deliveryDate = Data.deliveryDate;
    form.usageDescription = Data.usageDescription;
    form.applicant = Data.applicant;
    form.approvalStatus = Data.approvalStatus;
    form.approver = Data.approver;
    form.registrant = Data.registrant;
    form.paymentMethod = Data.paymentMethod;
    form.unitPrice = Data.unitPrice;
    form.notes = Data.notes;
    form.materialClassificat = Data.materialClassificat;  
    form.createdBy = Data.createdBy;
    form.createdDate = Data.createdDate;
    form.updatedBy = Data.updatedBy;
    form.updatedDate = Data.updatedDate;
    form.deletedBy = Data.deletedBy;
    form.deletedDate = Data.deletedDate;
    form.isDeleted = Data.isDeleted;
  }).catch(err=>{
    console.log(err);
    
  })    
    }

//同意
const onSubmit = () => {
  let hh={
    approvalResult:"同意",
    approvalNotes:from.approvalNotes,
    materialStoreId:route.query.materialStoreId,
    subgrantor:from.subgrantor,
}
 axios.post('/mwrite/api/MaterialStore/CrerateAppro',hh).then(res=>{
        if(res.data.data>0){
         ElMessage({
           message: '已通过',
          type: 'success',
        })
        router.push('/Approval/MaterialProcurementShow')
       }else{
         ElMessage.error('修改失败')
        }
    })
}



    //转批
    const submitForm = () => {
      let hh={
    approvalResult:"同意并转批",
    approvalNotes:from.approvalNotes,
    materialStoreId:route.query.materialStoreId,
    subgrantor:from.subgrantor,
}
 axios.post('/mwrite/api/MaterialStore/CrerateAppro',hh).then(res=>{
        if(res.data.data>0){
         ElMessage({
           message: '已通过并转批',
          type: 'success',
        })
        router.push('/Approval/MaterialProcurementShow')
       }else{
         ElMessage.error('修改失败')
        }
    })
    }
//拒绝
const Cancel=()=>{
 
 let hh={
     approvalResult:"拒绝",
     approvalNotes:from.approvalNotes,
     materialStoreId:route.query.materialStoreId,
     subgrantor:from.subgrantor,
 }
 axios.post('/mwrite/api/MaterialStore/CrerateAppro',hh).then(res=>{
         if(res.data.data>0){
          ElMessage({
            message: '已拒绝',
           type: 'success',
         })
         router.push('/Approval/MaterialProcurementShow')
        }else{
          ElMessage.error('修改失败')
         }
     })
 
 }
   
    </script>
    
    <style scoped>
    
    </style>